import { useEffect, useState } from "react";
import { Button, Tooltip, Modal, message } from "antd";
import { HomeFilled } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import shortId from "shortid";
import { getTime } from "@/utils/index";
import { surveyStore } from "@/stores/survey";
import { questionnaire } from "@/stores/questionnaire";
import type { surveyType } from "@/types/index";
import SurveyControl from "./components/SurveyControl";
import SurveyEditor from "./SurveyEditor";
import SurveyList from "./components/SurveyList";
import BatchAdd from "./components/BatchAdd";
import ConcernFront from "./components/ConcernFront";
import ConcernCopy from "./components/ConcernCopy";
import ConcernOption from "./components/ConcernOption";
import { InvestigationContent } from "./stye";

function Investigation() {
  const navigate = useNavigate();
  const [surveyId, setSurveyId] = useState("");
  //初始化
  useEffect(() => {
    const surveyId = surveyStore.surveyId;
    const maxId = localStorage.getItem("MAXID");
    if (surveyId) {
      const survey = surveyStore.surveySelected(surveyId);
      if (survey) {
        //获取首次数据
        questionnaire.init(survey, maxId);
        setSurveyId(survey.id);
      } else {
        surveyStore.modifySurveyId("");
      }
    } else {
      questionnaire.reset();
    }
  }, []);
  //返回
  const goBack = () => {
    questionnaire.reset();
    navigate("/project");
  };

  //预览
  const previewClick = () => {
    if (questionnaire.id) {
      navigate(`/preview?id=${questionnaire.id}`);
    } else {
      Modal.warning({
        title: "提示",
        content: "当前问卷未保存"
      });
    }
  };
  // 保存
  const save = (state: boolean) => {
    if (questionnaire.question.length == 0) {
      return Modal.warning({
        title: "提示",
        content: "当前问卷没有题目"
      });
    }
    questionnaire.state = state ? state : questionnaire.state;
    const survey: surveyType = {
      id: questionnaire.id,
      title: questionnaire.title,
      content: questionnaire.content,
      createTime: questionnaire.createTime,
      modifyTime: questionnaire.modifyTime,
      state: questionnaire.state,
      question: questionnaire.question,
      controlLogic: questionnaire.controlLogic,
      controlOption: questionnaire.controlOption
    };
    if (questionnaire.id == "") {
      survey.id = shortId.generate();
      setSurveyId(survey.id);
      questionnaire.id = survey.id;
      survey.createTime = getTime();
      questionnaire.createTime = survey.createTime;
      surveyStore.surveyAdd(survey);
    } else {
      survey.modifyTime = getTime();
      questionnaire.modifyTime = survey.modifyTime;
      surveyStore.surveyModify(survey);
    }
    localStorage.setItem("MAXID", String(questionnaire.questionMaxId));
    surveyStore.modifySurveyId(questionnaire.id);
    message.success("保存成功！");
    if (state) {
      questionnaire.reset();
      navigate("/project");
    }
  };

  return (
    <InvestigationContent>
      <div className="investigation-header flex-between">
        <div>
          <Tooltip placement="bottom" title="返回我的项目">
            <HomeFilled onClick={goBack} />
          </Tooltip>
          <span style={{ marginLeft: 20 }}>{surveyId ? "编辑" : "创建"}问卷</span>
        </div>
        <div className="header-button flex-between align-items">
          <Button onClick={previewClick}>预览</Button>
          <Button type="primary" onClick={() => save(false)}>
            保存
          </Button>
          <Button className="release" onClick={() => save(true)}>
            发布
          </Button>
        </div>
      </div>
      <div className="investigation-section">
        <div className="investigation-panel">
          <SurveyControl deriveContrl={(title, type) => questionnaire.deriveContrl(title, type)}></SurveyControl>
        </div>
        <SurveyEditor>
          <SurveyList></SurveyList>
        </SurveyEditor>
      </div>
      <BatchAdd></BatchAdd>
      <ConcernFront getFront={front => questionnaire.getFront(front)}></ConcernFront>
      <ConcernCopy getCopy={(childId, data) => questionnaire.getCopy(childId, data)}></ConcernCopy>
      <ConcernOption optionChange={optionLogic => questionnaire.getControlOption(optionLogic)}></ConcernOption>
    </InvestigationContent>
  );
}

export default Investigation;
